<template>
    <layout>

        <mt-header title="作业报告">
            <a href="/study/homework" slot="left">
                <mt-button  icon="back"></mt-button>
            </a>
        </mt-header>
        <div>
            <div class="content-top">
                <div class="top-top">练习类型：{{ report.type | getType }} </div>
                <div class="top-c">练习时间：{{ report.finishDate }} </div>
            </div>
            <div class="content-con">
                <div class="con-box">
                    <div>
                        <span>正确率</span>
                        <p>{{ report.accuracy | toInt}}<span>%</span></p>
                    </div>
                </div>
            </div>

            <div class="list-li">
                <ul>
                    <template v-for="(item, index) in report.taskQuestionRepostDTOs">
                        <li><a :class="{ 'error':  item.validatResult == 2 }" :href="'/study/practice/detail?type=1&id='+report.id+'&question='+item.taskQuestionId">{{ index + 1}}</a></li>
                    </template>
                </ul>
            </div>
            <div class="content-list">
                <div class="content-l"><div><p>共做题</p><p>{{ report.totalCount }}</p></div></div>
                <div class="content-c"><div><p>平均难度</p><p>{{ report.avgDifficulty }}</p></div></div>
                <div class="content-r"><div><p>平均正确率</p><p>{{ report.accuracy | toInt }}%</p></div></div>
            </div>
            <div class="footer">
                <a class="left" :href="'/study/homework/practice/detail?type=1&id='+report.id">全部详解</a>
                <a class="right" :href="'/study/homework/practice/detail?type=2&id='+report.id">错题详解</a>
            </div>
        </div>
    </layout>
</template>
<style lang="scss">
    @import "index.scss";
    img{
        width: 100%;
        height: 100%;
    }
</style>
<script type="text/babel">
    import { api } from 'framework/config.js';
    import Layout from "component/layout/standard";

    import Vue from 'vue'
    import Mint from 'mint-ui';
    Vue.use(Mint);

    export default {
        components: {
            Layout
        },
        data(){
            return {
            }
        },
        filters: {
            toInt(num){
                return Math.ceil(num);
            },
            getType(type){
                return "专项练习"
            }
        },
        computed: {
            api(){
                return api();
            }
        },
        methods: {
            changeBgc: function(index) {
                this.ind = index,
                    console.log(this.ind)

            }
        },
        mounted() {
        }
    }
</script>

